<template>
  <div class="subPage" >
    <div>
        <nav-bar
        :title="'线上问诊'"
        position="center"
        color='linear-gradient(90deg,rgba(85,125,245,1) 0%,rgba(63,74,222,1) 100%)'
        :rowColor="'white'"
        :goBack="goBack"
        :isMsg='false'
        fontColor='#fff' ></nav-bar>
    </div>
    <!-- 搜索条件 1   2   互斥   都和3 兼容 -->
    <div :class="['doctorListMenu',{'specVanItem':chooseSecond}]">
      <van-dropdown-menu>
        <van-dropdown-item :title-class="chooseSecond?'':'activeTitle'" v-model="value1" @toggle="isOverlay" :title="value1==='a'||value1==='comprehensive'?'综合推荐':'好评率'" @change="conditionSearch($event,'firstOne')"  :options="option1" />
        <van-dropdown-item v-model="value2" v-show="true"  title="接诊量" :options="option2" />
        <van-dropdown-item :title-class="value3==='a'?'':'activeTitle'"  v-model="value3" @toggle="isOverlay" @change="conditionSearch($event,'position')"   :options="option3" />
      </van-dropdown-menu>
      <span :class="['coverCenter',{'blueColor':chooseSecond}]" @click="sortByConsultaion">
        接诊量
        <img :src="chooseSecond?chooseTangle:unChooseTangle" :class="{'isUp':isUp}" alt="">
      </span>
    </div>
    <scroll-view
      v-if="doctorList.length!=0"
      :scroll-y="true"
      style="overflow-y:scroll;flex:1;"
      :refresher-enabled="true"
      :refresher-triggered="triggered"
      @refresherrefresh="onPullDownRefresh"
    >
      <ul class="box">
          <li v-for="(item, index) in doctorList" :key="index" @click="toDoctorDetails(item)">
          <div class="topBox">
            <div class="doctorImg">
              <img :src="item.doctor_image_url">
            </div>
            <div class="doctorMsg">
              <div class="docTop">
                <div class="docName" :title="item.doctor_name" >{{item.doctor_name}}</div>
                <div class="docPosition" :title="item.positional_title +'/'+ item.dept_name">{{item.positional_title}} / {{item.dept_name}}</div>
                <div class="docIntroduce"  :title="item.skilled_in">
                  擅长：{{item.skilled_in ? item.skilled_in : ''}}
                </div>
                <div class="evaluateBox"  >
                  <div class="itemBox">
                    <div class="leftOright">
                      <img v-if="imgUrl" :src="imgUrl + 'starsIcon1.png'">
                      <div class="colorBlue">{{item.consultation_total}}<span>人</span></div>
                      <div class="marginrightClass">已接诊</div>
                    </div>
                    <div class="leftOright" :catchtouchmove='false' style="min-width:267rpx">
                      <span style="margin-top:6%">
                        <css-ring :value="item.positive_rate" ></css-ring>
                      </span>
                      <div class="colorOrange">{{item.positive_rate*100}}<span>%</span></div>
                      <div class="marginrightClass" >好评率</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="docBom">
              <button class="btnLeft" open-type="getUserInfo" plain="true" @click.stop @getuserinfo="toDetails(1,item,$event)">
                <img :src="miniImgText" >
                <div class="itemTxt">
                  <p class="topP">
                    图文
                    <span class="colorGray">￥  {{item.image_text_price ? item.image_text_price : '0'}}</span>
                  </p>
                  <!-- <p class="bomP">{{item.image_text_price ? item.image_text_price : '0'}}元/次</p> -->
                </div>
              </button>
              <button class="btnLeft" open-type="getUserInfo" plain="true" @click.stop @getuserinfo="toDetails(2,item,$event)">
                <img :src="miniAudioFrequency" >
                <div class="itemTxt">
                  <p  class="topP">
                    音频
                    <span class="colorGray">￥  {{item.video_price  ? item.video_price : '0'}}</span>
                  </p>
                  <!-- <p class="bomP">{{item.video_price  ? item.video_price : '0'}}元/次</p> -->
                </div>
              </button>
            </div>
            </div>
          </div>

        </li>
      </ul>
    </scroll-view>
    <div class="bomBox" v-if="doctorList.length == 0 && !delayShowData">
          <div class="searchDefault" >
            <img :src="defaultImg" >
            <div>暂无相关数据</div>
          </div>
        </div>
    <!-- <div class="modalClass" :style="{display: modalStyle}">
      <div class="modalBox">
        <div class="modalTit">
          <img :src="iconUrl">
        </div>
        <div class="closeBox" @click="close">
          <img src="/static/images/close.png">
        </div>
        <div class="modalCenter">
          <div class="dataBox">
            <span class="itemPie"></span>
            <span class="itemSpan">医生真实</span>
          </div>
          <div class="dataBox">
            <span class="itemPie"></span>
            <span class="itemSpan">提交病情并付款</span>
          </div>
          <div class="dataBox">
            <span class="itemPie"></span>
            <span class="itemSpan">医生接诊后问诊开始</span>
          </div>
          <div class="dataBox">
            <span class="itemPie"></span>
            <span class="itemSpan">问诊期间不限交流次数</span>
          </div>
          <div class="dataBox">
            <span class="itemPie"></span>
            <span class="itemSpan">如果发生退款，审核通过后相关款项将在10~15个工作日内沿原账户路径退还到您的账户</span>
          </div>
          <div class="dataBox">
            <span class="itemPie"></span>
            <span class="itemSpan">医生给出结论后或接诊24小时后，问诊结束</span>
          </div>
        </div>
        <div class="modalFooter" @click="close(1)">立即申请</div>
      </div>
    </div> -->
    <i-message id="message" />
    <i-toast id="toast" />
  </div>
</template>

<script>
  let app = getApp()
  let store = app.store
//   import { mapState } from 'vuex'
  import nim from '@/utils/nim'
  import storage from '@/utils/storage'
  import api from '@/api/api'
  import cssRing from '@/components/cssRing'
  import navBar from '@/components/navBar'
//   import Bus from '@/utils/bus.js'
  const { $Toast, $Message } = require('../../../../../static/iview/base/index')
//   import visitingTips from '@/components/visitingTips.vue'
  export default {
    components: {
     cssRing,
     navBar
    },
    data () {
      return {
        modalStyle: 'none',
        iconUrl: '/static/images/ImageText.png',
        doctorList: [],
        doctorInfo: '',
        interrogationKey: '',
        miniImgText: '',
        imgUrl: '',
        miniAudioFrequency: '',
        defaultImg: '',
        c_val: null,
        value1: 'comprehensive',
        value2: 'z',
        value3: 'a',
        isOverlay: true,
        delayShowData: true,
        option1: [
          { text: '综合推荐', value: 'comprehensive' },
          { text: '好评率', value: 'positive_rate' }
        ],
        option2: [
          // { text: '接诊量', value: 'z' },
        ],
        option3: [
          { text: '全部职称', value: 'a' }
        ],
        oldParam: {},
        chooseSecond: false,
        unChooseTangle: '',
        chooseTangle: '',
        triggered: false,
        isUp:false // 控制旋转
        // loading: false,
        // color: '#000',
        // background: '#f8f8f8',
        // show: true,
        // animated: false
      }
    },
    computed: {
    //   ...mapState([
    //     'messageList', 'unreadList', 'totleChat', 'allChat', 'doctorInfo', 'sessionsList'
    //   ])
    },
    onReady: function() {
      var that = this;
          // that.canvasRing = that.$mp.page.selectComponent("#canvasRing")
          // console.log(that.canvasRing,'that.canvasRing')
          // // that.canvasRing.data.value = 60
          // that.canvasRing.showCanvasRing()
    },
    mounted () {
    },
    onLoad (options) {
      let that = this
      this.chooseSecond = false
      this.isUp = false
      this.trigger = false
      this.delayShowData = true
      this.value1 = ''
      this.value1 = 'comprehensive'
      this.value2 = 'z'
      this.value3 = 'a',
      this.getAllDocPosition()
      let dept_id = this.$route.query.id*1 || 332
      let doctor_id = this.$route.query.doctor_id
      console.log(doctor_id)
      this.oldParam = {
        dept_id: dept_id
      }
      this.getDoctor(dept_id,doctor_id)
      // that.countDown()
      // that.getList()
    },
    methods: {
      getDoctor (e,doctor_id) {
        this.delayShowData = true
        this.triggered = true
        let list = []
        this.doctorList = []
        wx.showLoading({
            title: "加载中...",
            mask: true
          });
        this.$api.doctorList({dept_id: e}, {'showLoading': true}).then(res => {
          wx.showLoading({
            title: "加载中...",
            mask: true
          });
          console.log(doctor_id)
          if (doctor_id && doctor_id!= 'undefined') {
            res.data.forEach(item => {
              if (item.doctor_id == doctor_id) {
                list.push(item)
                return;
              }
            });
          } else {
            list = res.data
          }
          this.triggered = false
          this.doctorList = list
          setTimeout(() => {
            wx.hideLoading()
            this.delayShowData = false
          }, 500);
        })
      },
      close (e) {
        this.modalStyle = 'none'
        // console.log(this.doctorInfo)
        // if (e == 1) {
          this.$router.push(`/pages/subPage/register/fillInMsg/main?doctorInfo=${JSON.stringify(this.doctorInfo)}&key=${this.interrogationKey}`)
        // }
      },
      toDoctorDetails(item) {
        // console.log('医生信息',JSON.stringify(this.doctorInfo))
        this.$router.push(`/pages/subPage/register/doctorDetails/main?id=${item.doctor_id}&name=${item.doctor_name}`)

      },
      goBack() {
        this.$router.go(-1)
      },
      // 用户登入状态、身份证认证状态识别
      judgeUserInfo(e,value) {
        if (e.mp.detail.rawData) {
        //用户按了允许授权按钮
        console.log("用户按了允许授权按钮");
        //判断是否登陆(是否有患者token)
        var token = this.$storage.getToken();
        if (token) {
          //判断是否认证
          var that = this;
          that.$api
            .get_user_info("", { showLoading: true })
            .then(function (data) {
              let accountInfo = data.data[0];
              accountInfo.headImg = data.data[0].head_portrait
                ? data.data[0].head_portrait
                : "";
              that.$storage.setAccountInfo(accountInfo);
              if (accountInfo.netease_token) {
                nim.login(accountInfo);
              }
              if (data.data[0].isreal == 0) {
                // '未认证' 去认证
                that.$router.push("/pages/qualification/main");
              } else if (data.data[0].isreal == 1) {
                // '已认证' 去挂号
                // that.$router.push(
                //   `/pages/subPage/register/dept/main?video=${1}`
                // );
                that.close(value)  // 跳转
              }
            });
          } else {
            //跳转登录页
            // console.log('用户未登录')
            let that = this;
            mpvue.login({
              success(res) {
                if (res.code) {
                  that.$api.wechatLogin({ code: res.code }).then((data) => {
                    that.openid = data.data.openid;
                    that.key = data.data.session_key;
                    if (data.data.token) {
                      that.$storage.setToken(data.data.token);
                      // that.$router.push("/pages/subPage/register/dept/main");
                      that.close(value)  // 跳转
                    } else {
                      that.$router.push("/pages/center/child/login/main");
                    }
                  });
                } else {
                  this.$router.push("/pages/center/child/login/main");
                }
              },
            });
          }
        } else {
          //用户按了拒绝按钮
          console.log("用户按了拒绝按钮");
        }
      },
      toDetails(value,item,e) { // e 是事件回调event
        console.log(e)
        this.modalStyle = 'felx'
        this.doctorInfo = item
        this.interrogationKey = value

        this.judgeUserInfo(e,value)
      },
      // 获取所有医生职称
      getAllDocPosition() {
        this.option3 = [
          { text: '全部职称', value: 'a' }
        ]
        this.$api.getAllDocPosition({doctor_identity:1}, ({'showLoading': false})).then(res=>{
          res.data.forEach(ele=>{
            this.option3.push({
              value: ele.id,
              text: ele.title
            })
          })
        })
      },
      sortByConsultaion () {
        this.isOverlay = false
        this.chooseSecond = true
        this.value1 = 'a'
        this.isUp=!this.isUp  // 控制旋转
        if (this.isUp) {
          this.conditionSearch({},'consultation_count.desc')
        } else {
          this.conditionSearch({},'consultation_count.asc')
        }
      },
      // 下拉刷新
      onPullDownRefresh (){
        this.trigger = true
        let dept_id = this.$route.query.id*1
        let doctor_id = this.$route.query.doctor_id
        if (doctor_id=='undefined') {
          this.conditionSearch({},'oldParam')
        } else {
          this.getDoctor(dept_id,doctor_id)
        }
      },
      conditionSearch (e,sortKey) {
        this.delayShowData = true
        let doctor_id = this.$route.query.doctor_id
        // this.isOverlay = true
        if (sortKey==='firstOne') {
          this.value1 = e.mp.detail
          this.chooseSecond = false
        } else if (sortKey==='position') {
          this.$set(this.option3[0],'text','全部职称')
          this.value3 = e.mp.detail
        }
        let param = {
          dept_id: this.$route.query.id*1,
          positional_title: this.value3==='a'?'':this.value3,
          sort_by: this.oldParam.sort_by?this.oldParam.sort_by:''
        }
        if (sortKey !=='firstOne' && sortKey !== 'position') {
          param.sort_by = sortKey
        } else if (sortKey ==='firstOne' && this.value1==='positive_rate'){
          param.sort_by = 'positive_rate'
        } else if (sortKey ==='firstOne' && this.value1==='comprehensive') {
          param.sort_by = ''
        }
        let list = []
        if (sortKey === 'oldParam') {
          param = this.oldParam // 保存本次查询参数
        }
        this.oldParam = param
        this.doctorList = []
        this.$api.doctorList(param, ({'showLoading': true})).then(res => {
          console.log(doctor_id)
          if (doctor_id && doctor_id!= 'undefined') {
            res.data.forEach(item => {
              if (item.doctor_id == doctor_id) {
                list.push(item)
                return;
              }
            });
          } else {
            list = res.data
          }
          this.doctorList = list
          if (this.trigger) {
            wx.stopPullDownRefresh()
          }
          this.delayShowData = false
        })
      }
    },
    onShow () {
      this.imgUrl = api.imgUrl
      this.miniImgText = this.imgUrl + 'miniImgText.png'
      this.miniAudioFrequency = this.imgUrl + 'miniAudioFrequency.png'
      this.defaultImg = this.imgUrl + 'default.png'
      this.unChooseTangle = this.imgUrl + 'unchooseTangle.png'
      this.chooseTangle = this.imgUrl + 'chooseTangle.png'
    },
    watch: {
      sessionsList: function(oldValue, newValue) {
        // this.dealData()
      }
    }
  }
</script>

<style scoped lang='less'>
  .subPage {
    display: flex;
    flex-direction: column;
    background: #F9F9F9;
  }
  .bomBox{
    // display:flex;
    // flex-direction: row;
    // height: 1100rpx;
    // height: 1206rpx;
    height: 100%;
    background: #FFFFFF;
    position: relative;
    //  height:600px;/去掉高度，只能垂直居中。
    display:flex;
    justify-content:center;
    align-items:center;
    .searchDefault{
      width:564rpx;
      height: 455rpx;
      position: relative;
      img{
        width: 100%;
        height: 100%;
      }
      div{
        width: 100%;
        font-size:31rpx;
        font-weight:400;
        color:rgba(0,0,0,0.4);
        text-align: center;
        position: absolute;
        top: 50%;
      }
    }
  }
  .box{
    // height: 1206rpx;
    background-color: #f9f9f9;
    flex: 1;
    overflow-x: hidden;
    li{
      // height: 375rpx;
      // margin: 16rpx 0;
      background: #FFFFFF;
      margin-bottom: 16rpx;
      padding: 17rpx 30rpx 18rpx 30rpx;
      .doctorImg{
        width:130rpx;
        height:130rpx;
        img{
          width:100%;
          height:100%;
          border-radius:50%;
        }
        // display: inline-block;
      }
      .topBox{
        // height: 265rpx;
        width: 100%;
        display: flex;
        flex-direction: row;
        padding-top: 25rpx;
        // display: inline-block;
      }
      .doctorMsg{
        width: 530rpx;
        height: 100%;
        // border-bottom: 1rpx solid #E9E9E9;
        display: flex;
        flex-direction: column;
        margin-left:20rpx;
        .docTop{
          height: 100%;;
        }
      }
      .docName{
        display: inline-block;
        width: 34%;
        text-align: left;
        font-size: 42rpx;
        font-weight:700;
        color:rgba(74,113,232,1);
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
      .docPosition{
        display: inline-block;
        width: 65%;
        text-align: right;
        font-size: 32rpx;
        font-weight:700;
        color:rgba(51,51,51,1);
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
      .docIntroduce{
        // margin:10rpx 0;
        margin-top: 5rpx;
        margin-bottom: 15rpx;
        max-height: 88rpx;
        width: 100%;
        font-size:30rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        // line-height: 88rpx;
        font-weight:400;
        color:rgba(153,153,153,1);
      }
      .evaluateBox{
        display: flex;
        flex-direction: column-reverse;
        // height: 35%;
        // justify-content: space-between;
        .itemBox{
          display: flex;
          // flex-direction: column-reverse;
          justify-content: space-between;
          .leftOright{
            // flex: 1;
            min-width: 52%;
            display: flex;
            // flex-direction: column;
            div{
              font-size:30rpx;
              font-family:PingFangSC-Regular,PingFang SC;
              font-weight:400;
              color:rgba(153,153,153,1);
              text-align: right;
              // flex: 1;
            }
            .colorBlue{
              font-size:40rpx;
              font-family:PingFangSC-Medium,PingFang SC;
              font-weight:600;
              // color:#4A71E8;
              color:#FF8A18;
              margin-top: 7rpx;
              span{
                font-size:30rpx;
                // color:#4A71E8;
                color:#FF8A18;
              }
            }
            .colorOrange{
              font-size:40rpx;
              font-family:PingFangSC-Medium,PingFang SC;
              font-weight:600;
              color:#FF8A18;
              margin-left: 6rpx;
              margin-top: 7rpx;
              span{
                font-size:30rpx;
                color:#FF8A18;
              }
            }
            .marginrightClass{
              margin-left:12rpx;
              margin-top: 17rpx;
            }
            img{
              width: 32rpx;
              height: 32rpx;
              margin-top: 20rpx;
              margin-right: 10rpx;
            }
          }
        }
      }
      .docBom{
        // padding:8rpx 0;
        padding: 20rpx 0 30rpx 0;
        width: 570rpx;
        position: relative;
        right: 20rpx;
        left: 0rpx;
        top: 30rpx;
        z-index: 1;
        border-top: 1rpx solid #E9E9E9;
        img{
          width: 43rpx;
          height: 43rpx;
          margin-right: 5rpx;
          vertical-align: bottom;
          float: left;
        }
        div{
          display: inline-block;
        }
        .itemTxt{
          margin-left: 10rpx;
          float: left;
          // height: 103rpx;
        }
        .btnLeft{
          min-width: 45%;
          position: relative;
          background-color: #fff;
          border: 0;
          display: inline-block;
        }
        .btnRight{
          width: 42%;
        }
        p{
          font-size:30rpx;
          font-weight:400;

        }
        .topP{
          // margin-top: 12rpx;
          // margin-bottom: 6rpx;
          line-height: 40rpx;
          margin: 12rpx 0 rpx 6rpx 5rpx;
          .colorGray {
            color: #999999;
          }
        }
        .bomP{
          color: #666666;
        }
      }
    }
  }
  .modalClass{
    position: absolute;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    background: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    z-index: 9;
    // background:rgba(0,0,0,1);
    // opacity:0.6;
    .modalBox{
      width: 617rpx;
      // height:663rpx;
      z-index:99;
      background: #FFFFFF;
      border-radius:12px;
      position: relative;
      .modalTit{
        width: 100%;
        img{
          width: 100%;
          height: 220rpx;
        }
      }
      .closeBox{
        width: 60rpx;
        height: 60rpx;
        position: absolute;
        right: -30rpx;
        top: -30rpx;
        img{
          width: 100%;
          height: 100%;
          z-index:99;
        }
      }
      .modalCenter{
        padding: 40rpx 30rpx 13rpx 37rpx;
        display: flex;
        flex-direction:column;
        .dataBox{
          margin-bottom: 20rpx;
          span{
            display: inline-block;
            font-size:28rpx;
            font-weight:400;
            color:rgba(102,102,102,1);
            vertical-align: middle;
          }
          .itemPie{
            width:12rpx;
            height:12rpx;
            background:rgba(74,100,234,1);
            border-radius: 50%;
            margin-right: 15rpx;
            // vertical-align: middle;
            margin-bottom: 5rpx;
          }
          .itemSpan{
            width:95%;
          }
        }
      }
      .modalFooter{
        width:544rpx;
        height:76rpx;
        background:rgba(74,100,234,1);
        border-radius:38rpx;
        font-size:28rpx;
        font-weight:600;
        color:rgba(255,255,255,1);
        margin: 0 37rpx 63rpx 37rpx;
        line-height: 76rpx;
        text-align: center;
      }
      .btnDis{
        background: #c5c8ce;
      }
    }
  }
  .topNav{
    height: 500rpx;
  }
  .doctorListMenu {
    position: relative;
    .coverCenter {
      position: absolute;
      width: 33.4%;
      left: 50%;
      top: 0;
      z-index: 22;
      background-color: #F9F9f9;
      color: #999999;
      transform: translateX(-50%);
      height: 100%;
      box-sizing: border-box;
      text-align: center;
      line-height: 88rpx;
      text-align: center;
      font-size: 30rpx;
      img {
        width: 14rpx;
        height: 20rpx;
        position: absolute;
        transform: rotate(0deg);
        top: 50%;
        transform: translateY(-50%);
        margin-left: 12rpx
      }
      .isUp {
        transform: rotate(180deg);
        top: 38%;
      }
    }
    .blueColor {
      color:#4A71E8;
      font-weight: 600;
    }
  }
</style>
